import React, { useMemo } from 'react';
import { LoadingProps } from './interface';
import './index.less';

const defaultProps: LoadingProps = {
  children: undefined,
  className: '',
  style: {},
};

/**
 * loading
 * @author hupeng
 * @datetime 2021-1-15 10:02
 */
const Loading: React.FC<LoadingProps> & {
  defaultProps: Partial<LoadingProps>;
} = props => {
  const { style, className, children } = props;
  const classNames = useMemo(() => className || 'neo-dv-loading', [className]);

  return (
    <div className={classNames} style={style}>
      <svg width="50px" height="50px">
        <circle
          cx="25"
          cy="25"
          r="20"
          fill="transparent"
          strokeWidth="3"
          strokeDasharray="31.415, 31.415"
          stroke="#02bcfe"
          strokeLinecap="round"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0, 25 25;360, 25 25"
            dur="1.5s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="stroke"
            values="#02bcfe;#3be6cb;#02bcfe"
            dur="3s"
            repeatCount="indefinite"
          />
        </circle>

        <circle
          cx="25"
          cy="25"
          r="10"
          fill="transparent"
          strokeWidth="3"
          strokeDasharray="15.7, 15.7"
          stroke="#3be6cb"
          strokeLinecap="round"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="360, 25 25;0, 25 25"
            dur="1.5s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="stroke"
            values="#3be6cb;#02bcfe;#3be6cb"
            dur="3s"
            repeatCount="indefinite"
          />
        </circle>
      </svg>
      <div className="loading-tip">{children}</div>
    </div>
  );
};

Loading.defaultProps = defaultProps;

export default Loading;
